<template>
  <div class="sub-category">
    <div class="container">
      <!-- 面包屑 -->
      <SubBread></SubBread>

      <!-- 筛选区分类 -->
      <!-- 这里如果写成 filterChange() 函数调用方式, 必要加上$event事件对象 -->
      <!-- 如果写成 filterChange 函数名称方式, cb回调函数默认参数是 $event -->
      <SubFilter @filter-change="filterChange"></SubFilter>

      <!-- 商品面板 (排序 + 列表) -->
      <div class="goods-list">
        <!-- 排序组件 -->
        <SubSort @sort-change="sortChange($event)"></SubSort>
        <!-- 列表 -->
        <ul>
          <li v-for="goods in goodsList" :key="goods.id">
            <GoodsItem :goods="goods"></GoodsItem>
          </li>
        </ul>
        <!-- 无限加载组件, 无限加载也算是数据懒加载的一种方式 -->
        <XtxInfiniteLoading :finished="finished"
                            :loading="loading"
                            @infinite="getData"></XtxInfiniteLoading>
      </div>
    </div>
  </div>
</template>

<script>
import SubBread from '@/components/category/SubBread'
import SubFilter from '@/components/category/SubFilter'
import { ref, watch } from 'vue'
import SubSort from '@/components/category/SubSort'
import GoodsItem from '@/components/category/GoodsItem'
import API from '@/api/category'
import { useRoute } from 'vue-router'

export default {
  name: 'SubCategory',
  components: {
    GoodsItem,
    SubSort,
    SubFilter,
    SubBread
  },
  setup() {
    // 加载中
    const loading = ref(false)
    // 是否加载完毕
    const finished = ref(false)
    // 商品列表数据
    const goodsList = ref([])
    // 请求参数, 里面就是一个分页参数
    let reqParams = {
      page: 1,
      pageSize: 20
    }
    const route = useRoute()
    const getData = () => {
      loading.value = true
      // 设置二级分类的Id
      reqParams.categoryId = route.params.id
      API.getSubCategoryGoods(reqParams)
        .then((res) => {
          // 获取数据成功
          if (res.result.items.length) {
            // 有数据就追加数据
            // goodsList.value = [...goodsList.value, ...res.result.items]
            goodsList.value.push(...res.result.items)
            // 把page改成下一页码
            reqParams.page++
            loading.value = false

          } else {
            // 没有数据, 代表加载完成
            loading.value = false
            finished.value = true
          }
        })
    }

    // 在更改二级分类的时候需要重新加载数据(初始化数据), 并先清空之前页面的数据
    watch(() => route.params.id, (newVal) => {
      if (newVal && `/category/sub/${newVal}` === route.path) {
        // console.log('触发监听器咯')
        finished.value = false
        goodsList.value = []    // 导致列表空的, XtxInfiniteLoading加载更多组价顶上来
        reqParams.page = 1      // 加载组件进入可视区, 就会发出infinite事件, getData函数接收去加载数据
        // getData()    // 这行没必要
      }
    })

    // 1.更改排序组件的筛选数据, 重新请求
    const sortChange = (sortParams) => {
      finished.value = false
      // console.log(sortParams)
      // 合并请求参数, 保留之前参数, 且后面的 sortParams 会将前面同属性名的值覆盖
      reqParams = { ...reqParams, ...sortParams }
      reqParams.page = 1
      goodsList.value = []
      // getData()  // 这行也没必要, 因为加载更多组件进入可视区就会触发getData函数
    }

    // 2.更改筛选组件的筛选数据, 重新请求
    const filterChange = (filterParams) => {
      finished.value = false
      reqParams = { ...reqParams, ...filterParams }
      reqParams.page = 1
      goodsList.value = []
    }

    return {
      getData,
      finished,
      loading,
      goodsList,
      sortChange,
      filterChange
    }
  }
}
</script>

<style lang="less" scoped>

.sub-category {

  .goods-list {
    margin-top: 25px;
    padding: 0 25px;
    background-color: #fff;

    ul {
      display: flex;
      flex-wrap: wrap;
      padding: 0 5px;

      li {
        margin-right: 20px;
        margin-bottom: 20px;

        &:nth-child(5n) {
          margin-right: 0;
        }
      }
    }
  }
}
</style>
